<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">

            <el-form-item v-for="item in formParamList" :label="item.name" :key="item.id">
            	<div v-if="item.type == 'text'">
	                <el-input v-model="form[item.param]"></el-input>
            	</div>
            	<div v-if="item.type == 'select'">
            		<el-select placeholder="请选择内容" v-model="form[item.param]">
	                    <el-option v-for="item2 in dealJson(item.value)" :label="item2.label" :value="item2.value" :key="item2.value"></el-option>
	                </el-select>
            	</div>

            	<div v-if="item.type=='radio' ">
            		<el-radio-group v-model="form[item.param]">
					    <el-radio v-for="item3 in dealJson(item.value)" :label="item3.value" :key="item3.value">{{item3.label}}</el-radio>
					  </el-radio-group>
            	</div>

            	<div v-if="item.type=='checkbox' ">
            		<el-checkbox-group v-model="form[item.param]">
					    <el-checkbox v-for="item4 in dealJson(item.value)" :label="item4.value" :key="item4.value">{{item4.label}}</el-checkbox>
					  </el-checkbox-group>
            	</div>

            	<div v-if="item.type=='file'">
            		<el-upload class="upload-demo" :action="fileUploadAction" :data="{param:item.param}" :on-success="fileUploadSuccess" :on-remove="fileRemove" :file-list="defaultFileList[item.param]" list-type="picture">
					  <el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
            	</div>

            	<div v-if="item.type =='image'">
            		<el-upload :action="fileUploadAction" list-type="picture-card" :data="{param:item.param}" :on-success="imageUploadSuccess" :on-remove="imageRemove" :file-list="defaultImageFileList[item.param]">
  						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog v-model="imageDialog" size="tiny">
  						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
            	</div>

            	<div v-if="item.type =='textarea'">
            		<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form[item.param]"></el-input>
            	</div>
                
            </el-form-item>

			<el-form-item>
                <div class="btSubmitAddNews">
                	<el-button @click="closeDialog">取 消</el-button>
                    <el-button type="primary" @click="editFormResult">提交</el-button>
                </div>
            </el-form-item>
        </el-form>
	</div>
</template>


<script>

import _param from './param.vue'
import _http from './http.vue'
export default{
	props:['formTplId','requestUrl','formTplValueId','getFormValueInfoUrl','editChecked'],
	data(){
		return {
			//效果不大参数
			imageDialog:false,
			dialogImageUrl:'',
			a:{},
			//有效参数
			form:{},
			formParamList:{},
           	fileUploadAction:_param.param.fileUploadUrl,
           	defaultFileList:{},//默认的文件列表
           	fileList:{},//文件列表
			fileUidList:{},//删除文件时需要
			fileDealFlag:false,
			defaultImageFileList:{},
			imageFileList:{},
			imageUidList:{},
			imageFileDealFlag:false
		}
	},
	mounted(){
		this.getFormValueInfo()
	},
	methods:{
		getFormValueInfo(){
			_http.axiosRequest(this,this.getFormValueInfoUrl,{formTplId:this.formTplId,formValueId:this.formTplValueId},(res)=>{
				this.form = res.data.valueInfo;
				this.formParamList = res.data.valueTypeList
				let b = this.formParamList
				for(let i in b){
					if (b[i]['type'] == 'file') {
						let c = this.form[b[i]['param']];
						for (let j = 0; j < c.length; j++) {
							if (!this.defaultFileList[b[i]['param']]) {
								this.defaultFileList[b[i]['param']] = []
							}
							this.defaultFileList[b[i]['param']].push({name:c[j]['name'],url:c[j]['url']})
						}
					}else if(b[i]['type'] == 'image'){
						let c = this.form[b[i]['param']];
						for (let j = 0; j < c.length; j++) {
							if (!this.defaultImageFileList[b[i]['param']]) {
								this.defaultImageFileList[b[i]['param']] = []
							}
							this.defaultImageFileList[b[i]['param']].push({name:c[j]['name'],url:c[j]['url']})
						}
					}
				}				
    		})
		},
		closeDialog(){
			this.$emit('closeDialog')
		},
		editFormResult(){

			for(let i in this.fileList){
				this.form[i]=[]
				for(let j in this.fileList[i]){
					this.form[i].push(this.fileList[i][j])
				}
			}

			for(let i in this.imageFileList){
				this.form[i]=[]
				for(let j in this.imageFileList[i]){
					this.form[i].push(this.imageFileList[i][j])
				}
			}

			let editChecked = false

			if (this.editChecked) {
				editChecked = true
			}

			_http.axiosRequest(this,this.requestUrl,{editChecked:editChecked,formTplId:this.formTplId,formValueId:this.formTplValueId,form:this.form,userId:_http.getUserId()},(res)=>{
    			if (_http.apiResult(this,res.data)) {
    				this.closeDialog()
    				this.$emit('freshList')
    			}

    		})
		},
		dealJson(item){
			return JSON.parse(item)
		},
		//文件上传
		fileUploadSuccess(res,file,fileList){
			if (!this.fileDealFlag) {
				this.dealFileList(file)
			}
			if (!this.fileList[res.param]) {
				this.fileList[res.param] = {}
			}
			this.fileList[res.param][file.uid] = {
				name:file.name,
				url:res.url
			}
			this.fileUidList[file.uid] = res.param
		},
		fileRemove(file,file_list){
			if (!this.fileDealFlag) {
				this.dealFileList(file)
			}
			if (this.fileUidList[file.uid]) {
				delete this.fileList[this.fileUidList[file.uid]][file.uid]
			}
		},
		dealFileList(file){
			let a =this.defaultFileList
			for(let i in a){
				for(let j in a[i]){
					//删除的文件不在默认列表里，则重建图片列表
					if (a[i][j]['name'] != file.name) {
						if (!this.fileList[i]) {
							this.fileList[i] = {}
						}
						this.fileList[i][a[i][j]['uid']] = {name:a[i][j]['name'],url:a[i][j]['url']}
						this.fileUidList[a[i][j]['uid']] = i
					}
					//否则需要从form里面删除该文件
					else{
						let b = this.form[i]
						for(let c in b){
							if (b[c]['name'] == file.name) {
								this.form[i].splice(c,1)
							}
						}
					}
				}
			}
			this.fileDealFlag = true
		},
		//图片上传
		imageUploadSuccess(res,file,fileList){
			if (!this.imageFileDealFlag) {
				this.dealImageFileList(file)
			}
			if (!this.imageFileList[res.param]) {
				this.imageFileList[res.param] = {}
			}
			this.imageFileList[res.param][file.uid] = {
				name:file.name,
				url:res.url
			}
			this.imageUidList[file.uid] = res.param
		},
		imageRemove(file,file_list){
			if (!this.imageFileDealFlag) {
				this.dealImageFileList(file)
			}
			if (this.imageUidList[file.uid]) {
				delete this.imageFileList[this.imageUidList[file.uid]][file.uid]
			}
		},
		dealImageFileList(file){
			let a =this.defaultImageFileList
			for(let i in a){
				for(let j in a[i]){
					//删除的文件不在默认列表里，则重建图片列表
					if (a[i][j]['name'] != file.name) {
						if (!this.imageFileList[i]) {
							this.imageFileList[i] = {}
						}
						this.imageFileList[i][a[i][j]['uid']] = {name:a[i][j]['name'],url:a[i][j]['url']}
						this.imageUidList[a[i][j]['uid']] = i
					}
					//否则需要从form里面删除该文件
					else{
						let b = this.form[i]
						for(let c in b){
							if (b[c]['name'] == file.name) {
								this.form[i].splice(c,1)
							}
						}
					}
				}
			}
			this.imageFileDealFlag = true
		}

	}
}	
</script>